<template>
	<view class="baoming">
		<nav-bar :leftClick="backClick" :size="36"></nav-bar>
		<swiper class="swiper" :current="currIndex" indicator-dots  circular :duration="1000">
			<swiper-item v-for="(item, index) in homeInfo.banners" class="swiper-item" :key="index">
				<image class="lb-image" :id="'wrap' + index" :src="item" mode="aspectFill" />
			</swiper-item>
		</swiper>

		<view class="biaodan t">
			<view class="bk">
				<view class="title flex justify-center align-center"><text class="dian">参赛信息</text></view>
				<view class="box">
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							姓名:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<input
									v-model="user.name"
									class="input"
									placeholder-style=""
									placeholder="请填写参赛人姓名"
									type="text"
									value=""
								/>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							年龄:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<picker
									fields="year"
									mode="date"
									:end="getDate('end')"
									:value="user.age"
									@change="
										(e) => {
											selectValue(e, 'age');
										}
									"
								>
									<view :class="['input', getAge != '' ? '' : 'p']">{{ getAge ? getAge + '岁' : '请选择出生年份' }}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							婚否:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<picker
									range-key="name"
									:range="hunList"
									:value="user.hun"
									@change="
										(e) => {
											selectValue(e, 'hun');
										}
									"
								>
									<view :class="['input', user.hun !== null ? '' : 'p']">{{ user.hun !== null ? hunList[user.hun]['name'] : '请选择婚姻状况' }}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							籍贯:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<picker
									range-key="name"
									:range="juzhudiList[0]"
									:value="user.jiguan"
									@change="
										(e) => {
											selectValue(e, 'jiguan');
										}
									"
								>
									<view :class="['input', user.jiguan !== null ? '' : 'p']">{{ user.jiguan !== null ? juzhudiList[0][user.jiguan]['name'] : '请选择籍贯' }}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							现居住地:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<!-- <pick-regions>
									<view :class="['input', user.juzhudi !== null ? '' : 'p']">请选择现居住地</view>
								</pick-regions> -->
								<picker mode="multiSelector" range-key="name" :range="juzhudiList" @change="handleValueChange" @columnchange="handleColumnChange">
									<view :class="['input', user.juzhudi.length > 2 ? '' : 'p']">
										{{ user.juzhudi.length > 2 ? user.juzhudi.map((item) => item.name).join('') : '请选择现居住地' }}
									</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							活动赛区:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<picker
									range-key="name"
									:range="divisionList"
									:value="user.division"
									@change="
										(e) => {
											selectValue(e, 'division');
										}
									"
								>
									<view :class="['input', user.division !== null ? '' : 'p']">
										{{ user.division !== null ? divisionList[user.division]['name'] : '请选择活动赛区' }}
									</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							民族:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<picker
									range-key="name"
									:range="minzuList"
									:value="user.minzu"
									@change="
										(e) => {
											selectValue(e, 'minzu');
										}
									"
								>
									<view :class="['input', user.minzu !== null ? '' : 'p']">{{ user.minzu !== null ? minzuList[user.minzu]['name'] : '请选择民族' }}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							学历:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<picker
									range-key="name"
									:range="xueliList"
									:value="user.xueli"
									@change="
										(e) => {
											selectValue(e, 'xueli');
										}
									"
								>
									<view :class="['input', user.xueli !== null ? '' : 'p']">{{ user.xueli !== null ? xueliList[user.xueli]['name'] : '请选择学历' }}</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							职业:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<picker
									range-key="name"
									:range="zhiyeList"
									:value="user.zhiye"
									@change="
										(e) => {
											selectValue(e, 'zhiye');
										}
									"
								>
									<view :class="['input', user.zhiye !== null ? '' : 'p']">{{ user.zhiye !== null ? zhiyeList[user.zhiye]['name'] : '请选择职业' }}</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="biaodan">
			<view class="bk">
				<view class="title flex justify-center align-center"><text class="dian">联系方式</text></view>
				<view class="box">
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							微信:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<input
									v-model="user.weixin"
									class="input"
									placeholder-style=""
									placeholder="请填写您的微信号"
									type="text"
									value=""
								/>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							手机号:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<input
									v-model="user.phone"
									class="input"
									placeholder-style=""
									placeholder="请填写您的手机号"
									type="text"
									value=""
								/>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="biaodan">
			<view class="bk">
				<view class="title flex justify-center align-center"><text class="dian">身材信息</text></view>
				<view class="box">
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							身高(cm):
						</view>
						<view class="input-border">
							<view class="input-bg">
								<input
									v-model="user.shengao"
									class="input"
									placeholder-style=""
									placeholder="请填写您的身高"
									type="text"
									value=""
								/>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							体重(kg):
						</view>
						<view class="input-border">
							<view class="input-bg">
								<input
									v-model="user.tizhong"
									class="input"
									placeholder-style=""
									placeholder="请填写您的体重"
									type="text"
									value=""
								/>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							三围:
						</view>
						<view class="input-border">
							<view class="input-bg flex justify-between">
								<input
									v-model="user.bust"
									class="input"
									placeholder-style=""
									placeholder="胸围"
									type="text"
									value=""
								/>
								<input
									v-model="user.waistline"
									class="input margin-left-xs margin-right-xs"
									placeholder-style=""
									placeholder="腰围"
									type="text"
									value=""
								/>
								<input
									v-model="user.hipline"
									class="input"
									placeholder-style=""
									placeholder="臀围"
									type="text"
									value=""
								/>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							服装尺码:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<input
									v-model="user.fuzhuang"
									class="input"
									placeholder-style=""
									placeholder="请填写您的服装尺码"
									type="text"
									value=""
								/>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="biaodan">
			<view class="bk">
				<view class="title flex justify-center align-center"><text class="dian">参赛优势</text></view>
				<view class="box">
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							才艺特长:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<input
									v-model="user.caiyi"
									class="input"
									placeholder-style=""
									placeholder="请填写您的才艺特长"
									type="text"
									value=""
								/>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							报名老师:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<input
									v-model="user.baoming"
									class="input"
									placeholder-style=""
									placeholder="请填写您的报名老师"
									type="text"
									value=""
								/>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							参赛宣言:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<input
									v-model="user.cansai"
									class="input"
									placeholder-style=""
									placeholder="写一句参赛宣言吧！"
									type="text"
									value=""
								/>
							</view>
						</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							参加过的比赛:
						</view>
						<view class="input-border">
							<view class="input-bg">
								<input
									v-model="user.canjia"
									class="input"
									placeholder-style=""
									placeholder="请填写您参加过的比赛"
									type="text"
									value=""
								/>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="biaodan">
			<view class="bk">
				<view class="title flex justify-center align-center"><text class="dian">个人展示</text></view>
				<view class="box">
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							上传您5张个人高清参赛照片
						</view>
						<view class="flex flex-wrap images-list">
							<view class="input-border-image" v-for="(item, index) in user.images" :key="index">
								<view class="input-bg-image flex justify-center align-center">
									<view class="del" @click="delImages(index)">x</view>
									<image class="xj1" :src="item" mode="heightFix"></image>
								</view>
							</view>

							<view class="input-border-image" v-show="user.images.length < 5" @click="uploadImages">
								<view class="input-bg-image flex justify-center align-center">
									<image class="xj" src="../../static/images/baoming/xj.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="tip">仅支持jpg、png、gif，20M以内/个，建议尺寸:1080px *1440px 比例3:4或正方形图片</view>
					</view>
					<view class="box-item">
						<view class="laber">
							<text class="x">*</text>
							上传2个高清参赛视频吧
						</view>
						<view class="flex flex-wrap images-list">
							<view class="input-border-image" v-for="(item, index) in user.videos" :key="index">
								<view class="input-bg-image flex justify-center align-center">
									<view class="del" @click="delVideos(index)">
										<text class="wlIcon-31guanbi"></text>
									</view>
									<video class="xj1" :src="item" controls></video>

									<image class="xj1" :src="item" mode="heightFix"></image>
								</view>
							</view>

							<view class="input-border-image" v-show="user.videos.length < 3" @click="uploadVideos">
								<view class="input-bg-image flex justify-center align-center">
									<image class="xj" src="../../static/images/baoming/xj.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="tip">仅支持mp4,100M以内/个</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bm-btn flex align-center justify-center" @click="go('baoming')">
			<view class="block"></view>
			<text class="text">我要报名</text>
			<view class="block"></view>
		</view>
	</view>
</template>

<script>
let dizhi;
import navBar from '@/components/common/navBar/index.vue'
export default {
	components: {
		navBar
	},
	async onLoad(e) {
		let [error, res] = await uni.request({
			url: `/wanlshop/common/area`,
			method: 'GET'
		});
		dizhi = res['data'];
		let shi = dizhi[this.juzhudiIndex[0]]['city'];
		let qu = shi[this.juzhudiIndex[1]]['area'];
		this.juzhudiList = [dizhi, shi, qu];
		let [error1, res1] = await uni.request({
			url: `/wanlshop/activity/Index/getNation`,
			method: 'GET'
		});
		this.minzuList = res1.data;
		let [error2, res2] = await uni.request({
			url: `/wanlshop/activity/Index/getOccupation`,
			method: 'GET'
		});
		this.zhiyeList = res2.data;
		let [error3, res3] = await uni.request({
			url: `/wanlshop/activity/Index/getEducational`,
			method: 'GET'
		});
		this.xueliList = res3.data;
		let [error4, res4] = await uni.request({
			url: `/wanlshop/activity/Index/getMarriage`,
			method: 'GET'
		});
		this.hunList = res4.data;
		let [error5, res5] = await uni.request({
			url: `/wanlshop/activity/Index/getConfigDivision`,
			method: 'GET'
		});
		this.divisionList = res5.data;
		this.getHome()
		if (e.type == 'look') {
			this.type = true;
			let [err, r] = await uni.request({
				url: `/wanlshop/activity/Index/getDetail?activity_id=1`,
				method: 'GET'
			});
			console.log(new Date().getFullYear() - +r.data.age);
			console.log(r)
			this.user = {
				id: r.data.id,
				division: this.divisionList.findIndex((item) => item.id == r.data.division_id),
				name: r.data.realname,
				age: new Date().getFullYear() - +r.data.age + '',
				hun: this.hunList.findIndex((item) => item.name == r.data.marriage),
				jiguan: this.juzhudiList[0].findIndex((item) => item.name == r.data.hometown),
				juzhudi: [
					{
						id: r.data.provincecode,
						name: r.data.province
					},
					{
						id: r.data.citycode,
						name: r.data.city
					},
					{
						id: r.data.adcode,
						name: r.data.district
					}
				],
				minzu: this.minzuList.findIndex((item) => item.name == r.data.nation),
				xueli: this.xueliList.findIndex((item) => item.name == r.data.xueli),
				zhiye: this.zhiyeList.findIndex((item) => item.name == r.data.occupation),
				weixin: r.data.wx,
				phone: r.data.mobile,
				shengao: r.data.height,
				tizhong: r.data.weight,
				sanwei: r.data.three_dimensions,
				fuzhuang: r.data.size,
				caiyi: r.data.talent,
				baoming: r.data.registered_teacher,
				cansai: r.data.entry_declaration,
				canjia: r.data.desc,
				images: r.data.images.split(','),
				videos: r.data.videos_list,
				bust: r.data.bust,
				waistline: r.data.waistline,
				hipline: r.data.hipline,
			};
		}
	},
	data() {
		return {
			currIndex: 0, // 当前索引
			type: false,
			divisionList: [],
			hunList: [],
			juzhudiList: [[], [], []],
			juzhudiIndex: [0, 0, 0],
			minzuList: [],
			xueliList: [],
			zhiyeList: [],
			user: {
				division: null,
				name: '',
				age: null,
				hun: null,
				jiguan: null,
				juzhudi: [],
				minzu: null,
				xueli: null,
				zhiye: null,
				weixin: null,
				phone: null,
				shengao: null,
				tizhong: null,
				bust: null,
				waistline: null,
				hipline: null,
				fuzhuang: null,
				caiyi: null,
				baoming: null,
				cansai: null,
				canjia: null,
				images: [],
				videos: [],
				
			},
			homeInfo: {
				banners: []
			}
		};
	},
	methods: {
		backClick() {
			uni.reLaunch({url: '/pages/index'})
		},
		selectValue(e, type) {
			console.log(e.detail.value);
			this.user[type] = e.detail.value;
		},
		uploadImages() {
			uni.chooseImage({
				count: 5, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (res) => {
					res.tempFilePaths.map((item, index) => {
						uni.uploadFile({
							url: `/common/upload`,
							filePath: item,
							name: 'file',
							header: {
								token: this.$store.state.user.token
							},
							success: (uploadFileRes) => {
								this.user.images.push(JSON.parse(uploadFileRes.data).data.fullurl);
							}
						});
					});
					// this.user.images.push(...res.tempFilePaths);
					// console.log(res);
				}
			});
		},
		uploadVideos() {
			uni.chooseVideo({
				count: 5, //默认9
				sourceType: ['album'], //从相册选择
				success: (res) => {
					console.log(res);
					uni.showLoading({
						title: '上传中...',
						mask: true
					});
					uni.uploadFile({
						url: `/common/upload`,
						filePath: res.tempFilePath,
						name: 'file',
						header: {
							token: this.$store.state.user.token
						},
						success: (uploadFileRes) => {
							console.log(1111, uploadFileRes);
							const r = JSON.parse(uploadFileRes.data);
							if (r.code == 1) {
								this.user.videos.push(r.data.fullurl);
							} else {
								uni.showToast({
									icon: 'none',
									title: r.msg
								});
							}
						},
						complete() {
							uni.hideLoading();
						}
					});
					// this.user.images.push(...res.tempFilePaths);
					// console.log(res);
				}
			});
		},
		delImages(index) {
			this.user.images.splice(index, 1);
		},
		delVideos(index) {
			this.user.videos.splice(index, 1);
		},
		go() {
			let user = this.user,
				that = this;
			console.log(1111, user);
			let data = {
				id: this.type ? user.id : 0,
				activity_id: 1,
				realname: user.name,
				age: that.getAge, //年龄
				marriage: that.hunList[user.hun]?.['name'], //婚
				marriage_id: that.hunList[user.hun]?.['id'], //婚
				hometown: that.juzhudiList[0][user.jiguan]?.['name'], //籍贯
				// realname: user.juzhudi, //现居住地
				province: user.juzhudi[0]?.['name'],
				provincecode: user.juzhudi[0]?.['id'],
				city: user.juzhudi[1]?.['name'],
				citycode: user.juzhudi[1]?.['id'],
				district: user.juzhudi[2]?.['name'],
				adcode: user.juzhudi[2]?.['id'],
				nation: that.minzuList[user.minzu]?.['name'], //民族
				nation_id: that.minzuList[user.minzu]?.['id'], //民族
				xueli: that.xueliList[user.xueli]?.['name'], //学历
				educational_id: that.xueliList[user.xueli]?.['id'], //学历
				occupation: that.zhiyeList[user.zhiye]?.['name'], //职业
				occupation_id: that.zhiyeList[user.zhiye]?.['id'], //职业
				wx: user.weixin, //微信
				mobile: user.phone, //手机号
				height: user.shengao, //身高
				weight: user.tizhong, //体重
				three_dimensions: `${user.bust},${user.waistline},${user.hipline}`, //三维
				bust: user.bust,
				waistline: user.waistline,
				hipline: user.hipline,
				size: user.fuzhuang, //服装
				talent: user.caiyi, //才艺
				registered_teacher: user.baoming, //老师
				entry_declaration: user.cansai, //宣言
				desc: user.canjia, //参加过比赛
				images: user.images.join(','), //imgs
				videos: user.videos.join(','), //videos
				division_id: this.divisionList[user.division]?.['id'] //huodong赛区
			};

			console.log(data);
			uni.request({
				url: `/wanlshop/activity/Index/activityUserplayer`,
				method: 'POST',
				data,
				success: (res) => {
					console.log(111);
					if (res.res.code == 1) {
						uni.navigateTo({
							url: '/pages/tj/tj'
						});
					}
				}
			});
			// uni.navigateTo({
			// 	url: '/pages/tj/tj'
			// });
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year - 1;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		handleColumnChange(e) {
			console.log(e);
			const that = this;
			let col = e.detail.column;
			let row = e.detail.value;
			that.juzhudiIndex[col] = row;

			let shi = dizhi[this.juzhudiIndex[0]]['city'];
			let qu = shi[this.juzhudiIndex[1]]['area'];
			this.juzhudiList = [dizhi, shi, qu];
		},
		handleValueChange(e) {
			console.log(e.detail.value);
			// 结构赋值
			let [index0, index1, index2] = e.detail.value;
			let address = [this.juzhudiList[0][index0], this.juzhudiList[1][index1], this.juzhudiList[2][index2]];
			console.log(address);
			// let [sheng, shi, qu] = address;
			// console.log(111, sheng, shi, qu);
			this.user.juzhudi = address;
		},
		async getHome() {
			let [err, res] = await uni.request({
				url: `/wanlshop/activity/Index/getActivity`,
				method: 'GET'
			});
		
			this.homeInfo = res.data;
			
		},
	},
	computed: {
		getAge() {
			if (this.user.age) {
				let strBirthday = this.user.age;
				var returnAge,
					strBirthdayArr = strBirthday.split('-'),
					birthYear = strBirthdayArr[0],
					birthMonth = strBirthdayArr[1],
					birthDay = strBirthdayArr[2],
					d = new Date(),
					nowYear = d.getFullYear(),
					nowMonth = d.getMonth() + 1,
					nowDay = d.getDate();
				if (nowYear == birthYear) {
					returnAge = 0; //同年 则为0周岁
				} else {
					var ageDiff = nowYear - birthYear; //年之差
					if (ageDiff > 0) {
						if (nowMonth == birthMonth) {
							var dayDiff = nowDay - birthDay; //日之差
							if (dayDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						} else {
							var monthDiff = nowMonth - birthMonth; //月之差
							if (monthDiff < 0) {
								returnAge = ageDiff - 1;
							} else {
								returnAge = ageDiff;
							}
						}
					} else {
						returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
					}
				}
				return returnAge; //返回周岁年龄
			}

			return '';
		}
	}
};
</script>

<style lang="scss" scoped>
.baoming {

	.swiper {
		position: relative;
		z-index: -1;
		width: 750rpx;
		height: 500rpx;
	}
	min-height: 100vh;
	background: linear-gradient(180deg, #f66ef1 0%, rgba(252, 251, 252, 0) 100%);
	position: relative;
	z-index: 99;
	padding-bottom: 50rpx;

	.logo {
		.logo-img {
			z-index: -1 !important;
			width: 750rpx;
			height: 518rpx;
		}
		.text {
			/** 文本1 */
			font-size: 48rpx;
			font-weight: 700;
			letter-spacing: 2.4rpx;
			color: rgba(255, 255, 255, 1);
		}
	}
	.biaodan:last-child {
		margin-top: -50rpx !important;
	}
	.biaodan {
		// margin-top: 50rpx;
		&.t {
			// margin-top: -50rpx;
		}
		.title {
			margin: 46rpx auto;
			width: 290rpx;
			height: 56rpx;
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 1.6rpx;
			color: #261332;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			.dian {
				display: flex;
				justify-content: center;
				align-items: center;
				&::after,
				&::before {
					margin: 0 15rpx;
					display: block;
					content: ' ';
					width: 8rpx;
					height: 8rpx;
					background-color: #f66ef1;
				}
			}
		}
		.bk {
			margin: 0 auto 20rpx auto;
			box-sizing: content-box;
			width: 700rpx;
			border-radius: 40rpx;
			padding: 4rpx 4rpx 40rpx 4rpx;
			background: url('../../static/images/index/index_bg.png') no-repeat top center;
			background-size: cover;
			.box {
				height: 100%;
				width: 100%;
				border-radius: 10rpx;
				padding: 0 30rpx;
				.box-item {
					padding-bottom: 20rpx;
				}
				.laber {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					.x {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #df27e9;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
				.input-border {
					margin-top: 20rpx;
					width: 640rpx;
					height: 88rpx;
					border-radius: 10rpx;
					padding: 4rpx;
					.input-bg {
						position: relative;
						border-radius: 10rpx;
						width: 100%;
						height: 100%;
					}
					.input {
						border-radius: 10rpx;
						background: #ffffff;
						flex: 1;
						height: 100%;
						padding: 20rpx;
						padding-right: 88rpx;
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 1.4rpx;
						line-height: 39.2rpx;
						color: #000;
						&.p {
							
						}
					}
				}
				.input-border-image {
					margin-top: 20rpx;
					margin-right: 30rpx;
					width: 194rpx;
					height: 194rpx;
					border-radius: 10rpx;
					padding: 4rpx;
					.input-bg-image {
						position: relative;
						border-radius: 10rpx;
						width: 100%;
						height: 100%;
						.del {
							z-index: 999;
							position: absolute;
							right: -20rpx;
							top: -20rpx;
							width: 36rpx;
							height: 36rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							/** 文本1 */
							font-size: 24rpx;
							font-weight: 500;
							letter-spacing: 1.2rpx;
							color: rgba(255, 255, 255, 1);
							border-radius: 50%;
							background: rgba(0, 0, 0, 0.66);
						}
						.xj1 {
							height: 100%;
						}
						.xj {
							width: 66rpx;
							height: 66rpx;
						}
					}
				}
			}
		}
		.tip {
			/** 文本1 */
			margin: 20rpx 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #64596b;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}
}
.images-list {
	.input-border-image {
		background: #ffffff;
		box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(246, 110, 241, 0.15);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #e7dae9;
		color: #e7dae9;
	}
	.input-border-image:nth-child(3n) {
		margin-right: 0 !important;
	}
}
.bm-btn {
	margin: 30rpx auto;
	width: 640rpx;
	height: 100rpx;
	opacity: 1;
	border-radius: 10rpx;
	font-size: 32rpx;
	font-weight: 900;
	letter-spacing: 1.6rpx;
	color: rgba(255, 255, 255, 1);
	background: linear-gradient(270deg, #ff74e1 0%, #e994ff 100%);
	box-shadow: inset 0px 10px 10px 0px rgba(255, 236, 242, 0.67);
	border-radius: 100px 100px 100px 100px;
	font-size: 32rpx;
	color: #ffffff;
	text-shadow: 0px 4px 10px rgba(255, 59, 120, 0.7216);
	margin-bottom: 32rpx;
	.text {
		margin: 0 50rpx;
	}
	.block {
		width: 10rpx;
		height: 10rpx;
		background-color: #fff;
		border-radius: 50%;
	}
}
.btn-baoming {
	font-size: 32rpx;
	font-weight: 900;
	letter-spacing: 1.6rpx;
	color: rgba(255, 255, 255, 1);
	margin: 50rpx auto;
	width: 700rpx;
	height: 100rpx;
	opacity: 1;
	border-radius: 10rpx;
	background: linear-gradient(90deg, rgba(90, 71, 251, 1) 0%, rgba(162, 43, 248, 1) 100%);
}
</style>
